<template>
  <div class="watch container">
    <WatchHeader
      :detailInfo="detailInfo"
      :wxpayQrcode="$util.isEmpty(shareData) ? '' : `${shareData.share_url_h5}`"
      :loading="loading"
    ></WatchHeader>
    <el-row class="product-main">
      <div class="tab-left">
        <el-tabs v-model="activeName" class="comment-tab">
          <el-tab-pane label="详情" name="first">
            <div v-if="detailInfo.info" class="detail-content" v-html="detailInfo.info"></div>
          </el-tab-pane>
          <el-tab-pane name="second">
            <span slot="label">
              <i
                class="edu-icon-shikan tag-icon"
                v-if="detailInfo.audition_stat === 1 && detailInfo.is_buy === 0"
              ></i>
              目录
            </span>
            <div class="directory-wrap">
              <template v-if="detailInfo.course_type == 1 || detailInfo.course_type == 2">
                <CourseDirectory
                  :course_id="detailInfo.id"
                  :detailInfo="detailInfo"
                ></CourseDirectory>
              </template>
              <template v-else-if="detailInfo.course_type == 4">
                <ClassesDirectory
                  :classId="detailInfo.id"
                  :detailInfo="detailInfo"
                ></ClassesDirectory>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="评论" name="review" v-if="switchComment">
            <CourseComment :detailInfo="detailInfo"></CourseComment>
          </el-tab-pane>
          <el-tab-pane v-if="switchCourseware == 1" label="课件" name="file">
            <course-file :course_buy="detailInfo.is_buy"></course-file>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 右侧 -->
      <template v-if="detailInfo.course_type == 1 || detailInfo.course_type == 2">
        <OffsideTeachers
          :detailInfo="detailInfo"
          v-if="!$util.isEmpty(detailInfo)"
        ></OffsideTeachers>
      </template>
      <template v-else-if="detailInfo.course_type == 4">
        <OffsideClasses
          :classesData="detailInfo"
          v-if="!$util.isEmpty(detailInfo)"
        ></OffsideClasses>
      </template>
    </el-row>
    <!-- 课程推荐 -->
    <CourseRecommend></CourseRecommend>
    <!-- 分享 -->
    <CourseShare :data="shareData" :visible.sync="shareVisible"></CourseShare>
  </div>
</template>

<script>
import WatchHeader from './components/watchHeader'
import OffsideTeachers from '../components/offsideTeachers'
import OffsideClasses from '../components/offsideClasses'
import CourseDirectory from '../components/courseDirectory'
import ClassesDirectory from '../components/classesDirectory'
import CourseComment from '../components/courseComment'
import CourseShare from '../components/courseShare'
import CourseFile from '../components/courseFile'
import CourseRecommend from '@/views/course/components/courseRecommend'
import { mapGetters, mapState } from 'vuex'
export default {
  components: {
    WatchHeader,
    OffsideTeachers,
    OffsideClasses,
    CourseDirectory,
    ClassesDirectory,
    CourseComment,
    CourseShare,
    CourseRecommend,
    CourseFile
  },
  data() {
    return {
      activeName: 'first',
      detailInfo: {},
      shareData: {},
      shareVisible: false,
      loading: true
    }
  },
  computed: {
    ...mapGetters({
      switchComment: 'projectSetting/getGlobCourseCommentSwitch',
      switchCourseware: 'projectSetting/getGlobCoursewareSwitch'
    }),
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem // 课时数据
    })
  },
  created() {
    this.$api.getCourseDetail(this.$route.params.id, res => {
      const { data } = res
      this.detailInfo = data
      if (
        this.$util.isEmpty(this.getCurrentPlayItem) &&
        !this.$util.isEmpty(data.recent_learn) &&
        data.course_type != 2
      ) {
        // 缓存课时的item
        const sectionData = {
          id: data.recent_learn.section_id,
          course_id: data.recent_learn.course_id,
          section_rate: {
            current_time: data.recent_learn.current_time
          },
          section_data: data.recent_learn.section_data,
          face_data: data.recent_learn.face_data
        }
        this.$store.commit('course/setCurrentPlayItem', sectionData)
      }

      setTimeout(() => {
        this.loading = false
      }, 200)
    })
    let shareQuery = {
      type: 1,
      id: this.$route.params.id
    }
    this.getShareInfo(shareQuery)
  },
  methods: {
    // 获取分享内容
    getShareInfo(query) {
      this.$api.getShareInfo(query, res => {
        this.shareData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.watch {
  margin-top: 10px;
  .detail-content {
    padding: 10px 30px 20px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 24px;
    letter-spacing: 1px;
    word-wrap: break-word;
    ::v-deep img {
      max-width: 100%;
    }
  }
  .directory-wrap {
    padding: 0 20px 50px 10px;
  }
  .product-main {
    margin-top: 15px;
    ::v-deep .el-tabs {
      .el-tabs__active-bar {
        display: none;
      }
      .el-tabs__item {
        padding: 0 40px;
        .tag-icon {
          position: absolute;
          right: 12px;
          top: 5px;
          color: #67c23a;
          font-size: 15px;
          line-height: 1;
        }
      }
      .el-tabs__nav-wrap::after {
        height: 1px;
      }
    }

    .directory-list {
      padding: 0 20px 50px 10px;
    }

    .tab-left {
      width: 820px;
      float: left;
      background-color: #ffffff;
      .iframe-wrapper {
        min-height: 500px;
      }
      .comment {
        padding: 0 25px 50px;
      }
    }
  }
}
</style>
